<template lang="pug">
MenuPage
.discovery_content
    .clickToCreateQuery(@click="ClickToCreateQuery") Click To Create Query
    .showGame
        ul
            li(v-for="(item,index) in ResultDiscovery" :key="index")
                .discovery_cart(:style="styleObjectFun(index)")
                    GameItemCard.cartItem( :gi="item")
                    .delGame(@click="DelGame(item.steam_appid)") DelGame

BottomBar
</template>
<script setup lang="ts">

import {computed, onMounted, ref, watchEffect} from "vue";
import MenuPage from "../utils/MenuPage.vue";
import BottomBar from "../utils/BottomBar.vue";
import type {GameObj} from "../../utils/types/Game";
import GameItemCard from "../utils/game/GameItemCard.vue";
import {StoreDiscovery} from "../../store/discovery";

const styleObjectFun = (index: number) => {
    return {
        'pointer-events': index == 0 ? 'auto' : 'none',
        opacity: 1 - (index / 7),
        'box-shadow': index == 0 ? '4px 1px 20px 5px #00a1fb' : '10px 10px 10px 10px black',
        'margin-right': 500 + index * 60 + 'px',
    }
}
const storeDiscovery = StoreDiscovery();

const resultDiscovery = ref<GameObj[]>([])
const ResultDiscovery = computed(() => {

    return resultDiscovery.value.slice(0, 10)
})
const DelGame = (id: number) => {
  resultDiscovery.value = resultDiscovery.value.filter(item => item.steam_appid !== id);
}

const pageCount = computed(() => {
    return Math.ceil(ResultDiscovery.value.length / 10);
});

const ClickToCreateQuery = () => {
    storeDiscovery.Flush()
    setTimeout(() => {
        resultDiscovery.value = storeDiscovery.Get().value

    }, 500)
}
watchEffect(() => {
})
onMounted(() => {
        resultDiscovery.value = storeDiscovery.Get().value
    }
)

</script>
<style lang="sass" scoped>
@import "../../assets/sass/discovery/discovery"


</style>
